<!-- 反馈列表 -->   
<template>
  <div class="feed-back-box" @touchstart="touchStart($event)" @touchend="touchEnd($event)">
    <div class="list-item" v-for="(item,index) in list" :key="index"> 
        <div>盘点时间: <span class="list-numbers">{{item.createTime}}</span> </div>  
        <div class="status">已盘点</div>
    </div>
  </div> 
</template>

<script>
import api from '@/api/api.js'
export default {
  name: 'stockPD',
  data () {
    return {
     "pageSize": 20,
      "pageNum": 1,
      isLoading:false,
      list:[
        { 
          "id": 1,
                "channelUserId": 43,
                "storeId": 60,
                "createTime": "2021-11-15 16:44:18"
          
        },
      ]
    }
  },
  mounted () { 
    this.getList()
  },
  methods: {
    getList(){
        this.isLoading = true;
      api.shopkeeper.inventoryList({
          storeId:this.$route.query.id,
          "pageSize": this.pageSize,
          "pageNum": this.pageNum,
      },res=>{
        this.isLoading = false;
        this.list = this.pageNum == 1 ? res.result.data : this.list.concat(res.result.data); 
      }) 
    },
    touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop; 
        if (scrollTop + clientHeight >= scrollHeight-50 ) { //下拉到底了
          this.doLoadMore()  
        } 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() { 
      if(this.pageNum < this.totalPage){
        ++this.pageNum;
        this.getList()
      }
      return
    
    },
  }
}
</script>
<style lang="less" scoped>
.list-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-numbers{
  font-size: .28rem;
}
.list-item{
    background: #fff;
    border-radius: .12rem;
    padding: .20rem;
    box-shadow: 0 3px 7px #ededed;
    display: flex;
    justify-content: space-between;
    width: 6.90rem;
    margin: .12rem auto;

}
.feed-back-box{
    padding-top: .20rem; 
    background: #f7f7f7;
    position: relative;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition-duration: 300ms;
}
.list-header{
  display: flex;
  justify-content: space-between;
}
.status{
    color: #999;
}
.add-time{
  color: #999;
  font-size: .22rem;
}
</style>
